import * as React from "react";
import * as LocationProps from "../../common/locationProps";

interface GameInfoProps{
    readonly whiteCount:number
    readonly blackCount:number
    readonly message:string
    readonly errMessage?:string
}

class GameInfo extends React.Component<GameInfoProps & Partial<LocationProps.LocationProps>> {
    render() {
        const prop = LocationProps.MergeClassNames(["game-info"], this.props);
        return (
            <div className={LocationProps.ClassNameString(prop)} id={prop.id}>    
                <div className="game-info-row">
                    <div className="game-info-cell">
                        White: <span className="game-info-count">{this.props.whiteCount}</span>
                    </div>
                    <div className="game-info-cell">
                        Black: <span className="game-info-count">{this.props.blackCount}</span>
                    </div>
                </div>
                <div className="game-info-message">
                    {this.props.message}
                </div>  
                <div className="game-info-err-message">
                    {this.props.errMessage}
                </div>  
            </div>
        )
    }
}

export default GameInfo;